<template>
  <div>
    <s-nav-bar title="最近阅读"></s-nav-bar>
    <template v-if="datalist">
      <div class="noresult" v-if="datalist.length == 0">
        <div class="pic"></div>
        <p>最近没有阅读的书籍哦</p>
      </div>
      <recent-list v-else :data="datalist"></recent-list>
    </template>
  </div>
</template>

<script>
import sNavBar from '@/components/sNavBar.vue'
import RecentList from '@/components/RecentList.vue'
export default {
  components: {
    sNavBar,
    RecentList
  },
  data() {
    return {
      datalist: null
    }
  },
  created() {
    this.getRecentRead()

  },
  methods: {
    getRecentRead() {
      const recentRead = localStorage.getItem('xy_recentRead') || "[]";
      const jsonObj = JSON.parse(recentRead);
      console.log(recentRead)
      this.datalist = jsonObj;
    },
  }
}
</script>

<style scoped>
.noresult {
  text-align: center;
  margin-top: 50%;
  font-size: 13px;
  color: #ccc;
}

.noresult .pic {
  height: 80PX;
  background: url('~@/assets/img/404.png') no-repeat center;
  background-size: contain;
  margin-bottom: 20px;
}
</style>